<script setup>
// hubItem = {
//      id: "",
//     hub_name:"",
//     group_id: "",      
//      name: "",
//     nickname: "",
//     description: "",
//     create_at: "",
// }

import { useRouter } from 'vue-router';

const router = useRouter()
const props = defineProps(['hubItem'])
const hubItem = props.hubItem

function switchTo() {
    router.push({ name: "hub", query: { "id": hubItem.id } })
}

</script>
<template>
    <div>
        <div id="outer" @click="switchTo">
            <div id="hub_name">
                {{ hubItem.hub_name }}
            </div>
            <div id="hub_description">
                {{ hubItem.description }}
            </div>
            <div id="hub_footer">
                创建于 {{ hubItem.create_at }}
            </div>
        </div>
    </div>
</template>
<style scoped>
#outer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#hub_name {
    height: 15%;
    width: 95%;
    margin: auto;
    font-size: 0.4em;
    font-weight: 700;
    text-align: center;
    font-style: italic;
}

#hub_description {
    height: 70%;
    width: 95%;
    margin: auto;
    font-size: medium;
    text-align: left;
    text-indent: 2em;
    overflow: auto;
}

#hub_footer {
    height: 15%;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    font-size: small;
    color: rgb(134, 128, 128);
    border-top: 2px rgb(168, 164, 164) solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: last baseline;
}
</style>